<template>
  <div :class="{ 'web-container': deviceType == 'web', 'mobile-container': deviceType == 'mobile' , 'ipad-container': deviceType == 'ipad'}">
    <div class="siteTitle">安世代</div>
    <!-- 登录表单 -->
    <div class="content">
      <div class="register">
        <div class="registerBox">
          <div class="topTitle">用戶登入</div>
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
            <el-form-item prop="userName">
              <el-input
                v-model="loginForm.userName"
                placeholder="請輸入您的手機號碼"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                placeholder="请输入密码"
                show-password
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <div class="forget">
                <span @click="forgetPassword()">忘記密碼？</span>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button class="submit" @click="onSubmit('loginForm')"
                >下一步</el-button
              >
            </el-form-item>
          </el-form>
          <div class="loginBottom">
            <div class="goRegister">
              <p>沒有賬號？</p>
              <p class="freeRegister" @click="handlGoRegister()">免费註冊</p>
            </div>
            <!-- <div class="other">
              <div class="line"></div>
              <div class="otherLogin">其他方式登錄</div>
              <div class="line"></div>
            </div>
            <div class="otherIcons">
              <div
                class="iconItem"
                v-for="(item, index) in otherIconsList"
                :key="index"
              >
                <img class="iconLogin" :src="item.URl" alt="" />
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      // 绑定表单
      loginForm: {
        userName: "",
        account: "",
        password: "",
        confirmPassword: "",
      },
      // 规则表单
      loginRules: {
        userName: [
          { required: true, message: "請輸入您的手機號碼", trigger: "blur" },
          { min: 3, max: 5, message: "請輸入正确的手機號碼", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      otherIconsList: [
        {
          URl: require("@/assets/images/login/weiChat.png"),
        },
        {
          URl: require("@/assets/images/login/qq.png"),
        },
        {
          URl: require("@/assets/images/login/weiBo.png"),
        },
      ],
    };
  },
  methods: {
    forgetPassword() {
      this.$router.push("password");
    },
    onSubmit(formName) {
      console.log(formName, "formName");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push("/index");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      console.log("submit!", this.registerForm);
    },
    handlGoRegister() {
      this.$router.push("register");
    },
  },
};
</script>

<style lang="scss" scoped>
.web-container {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f7;

  .siteTitle {
    padding: 60px 0px 54px 80px;
    font-size: 50px;
    font-weight: 500;
    font-family: YujiBoku-Regular;
    color: #000000;
  }

  .content {
    display: flex;
    justify-content: center;
    align-items: center;

    .register {
      width: 1166px;
      padding: 60px 0px 60px 0px;
      background: #ffffff;
      border-radius: 20px 20px 20px 20px;
      display: flex;
      justify-content: center;
      align-items: center;

      .registerBox {
        width: 436px;

        .topTitle {
          width: 100%;
          text-align: center;
          font-size: 50px;
          margin-bottom: 37px;
        }

        .forget {
          font-weight: 500;
          font-size: 14px;
          color: #0d99ff;
          display: flex;
          justify-content: flex-end;

          span {
            cursor: pointer;
          }
        }

        .submit {
          width: 100%;
          height: 50px;
          background-color: #870c08;
          color: #ffffff;
          border-radius: 50px;
        }

        .loginBottom {
          .goRegister {
            display: flex;
            justify-content: center;
            font-weight: 500;
            font-size: 14px;
            color: #999999;
            margin-bottom: 20px;

            .freeRegister {
              color: #0d99ff;
              cursor: pointer;
            }
          }

          .other {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            justify-content: space-between;
            .line {
              width: 40%;
              height: 1px;
              background-color: #999999;
            }

            .otherLogin {
              display: flex;
              justify-content: center;
              width: 30%;
              font-weight: 500;
              font-size: 14px;
              color: #999999;
            }
          }

          .otherIcons {
            display: flex;
            justify-content: center;
            .iconItem {
              margin: 0px 10px 0px;
              .iconLogin {
                width: 26px;
                height: 26px;
              }
            }
          }
        }

        :deep .el-form {
          .el-form-item {
            margin-bottom: 20px;
          }
          .el-form-item:nth-child(2) {
            margin-bottom: 6px;
          }
        }
      }
    }
  }
}
</style>